/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

@import '../commons/index.css';
@import '../button/index.css';

:root {
  --spectrum-stepper-button-height: calc(var(--spectrum-component-single-line-height) / 2);
  --spectrum-stepper-button-width: 24px;
  --spectrum-stepper-padding: calc(var(--spectrum-padding) / 2);
  --spectrum-stepper-border-radius-reset: 0;
  --spectrum-stepper-border-size-reset: 0;
  --spectrum-stepper-border-size-default: 1px;
  --spectrum-stepper-input-min-width: var(--spectrum-component-single-line-height);
  --spectrum-stepper-default-width-desktop: calc(var(--spectrum-component-single-line-height) * 4);
  --spectrum-stepper-default-width-mobile: calc(var(--spectrum-component-single-line-height) * 5);
  --spectrum-stepper-validation-icon-right: var(--spectrum-global-dimension-size-100);
}

.spectrum-Stepper {
  composes: spectrum-FocusRing;

  display: inline-grid;
  position: relative;

  block-size: max-content;

  --spectrum-stepper-width: var(--spectrum-stepper-default-width-desktop);
  inline-size: var(--spectrum-stepper-width);
  line-height: 0;
  transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;

  /**
   * There are only two layouts, so we don't need to repeat them down below.
   * Technically there are other optimizations like this, but the others are harder to pull out, we'd need a truth table and it'd be harder to update.
   * Declaring them before elements get assigned to grid-areas to make those easier to read.
   **/
  &:not(.spectrum-Stepper--isMobile) {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr auto;
    grid-template-areas:
    'field increment'
    'field decrement';
    .spectrum-Stepper-button--stepUp {
      padding-block-start: calc(var(--spectrum-button-padding-y) + 1px);
      padding-block-end: calc(var(--spectrum-button-padding-y) - .5px);
    }
    .spectrum-Stepper-button--stepDown {
      padding-block-end: calc(var(--spectrum-button-padding-y) + .5px);
      padding-block-start: calc(var(--spectrum-button-padding-y) - .5px);
    }
  }
  &.spectrum-Stepper--isMobile {
    /* Use a variable here rather than inline-size directly so we don't conflict with form style override. */
    --spectrum-stepper-width: var(--spectrum-stepper-default-width-mobile);
    grid-template-rows: auto;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'decrement field increment';
    .spectrum-Stepper-button--stepUp {}
    .spectrum-Stepper-button--stepDown {}
  }

  .spectrum-Stepper-field {
    grid-area: field;
    /* override of spectrum-TextField style, declare before states */
    inline-size: unset;
    min-inline-size: var(--spectrum-stepper-input-min-width);
  }
  .spectrum-Stepper-icon {
    /* override of spectrum-TextField style, declare before states */
    padding-inline-end: 0;
  }
  .spectrum-Stepper-button--stepUp {
    grid-area: increment;
  }
  .spectrum-Stepper-button--stepDown {
    grid-area: decrement;
  }

  &:not(.spectrum-Stepper--isQuiet) {
    border-radius: var(--spectrum-border-radius);
    .spectrum-Stepper-icon {
      inset-inline-end: var(--spectrum-stepper-validation-icon-right);
    }

    &:not(.spectrum-Stepper--showStepper) {
      &:not(.spectrum-Stepper--isMobile) {
        .spectrum-Stepper-input {}
        .spectrum-Stepper-button {
          block-size: var(--spectrum-stepper-button-height);
          inline-size: var(--spectrum-stepper-button-width);
        }
        .spectrum-Stepper-button--stepDown {}
        .spectrum-Stepper-button--stepUp {}
      }
      &.spectrum-Stepper--isMobile {
        .spectrum-Stepper-input {}
        .spectrum-Stepper-button {
          block-size: var(--spectrum-textfield-height);
          inline-size: var(--spectrum-actionbutton-min-width);
        }
        .spectrum-Stepper-button--stepDown {}
        .spectrum-Stepper-button--stepUp {}
      }
    }
    &.spectrum-Stepper--showStepper {
      &:not(.spectrum-Stepper--isMobile) {
        .spectrum-Stepper-input {
          border-start-end-radius: 0;
          border-end-end-radius: 0;
        }
        .spectrum-Stepper-button {
          block-size: var(--spectrum-stepper-button-height);
          inline-size: var(--spectrum-stepper-button-width);
          border-inline-start-width: 0;
        }
        .spectrum-Stepper-button--stepDown {
          border-end-end-radius: var(--spectrum-border-radius);
          border-block-start-width: var(--spectrum-stepper-border-size-default);
          border-block-end-width: var(--spectrum-alias-input-border-size);
          border-inline-end-width: var(--spectrum-alias-input-border-size);
        }
        .spectrum-Stepper-button--stepUp {
          border-block-start-width: var(--spectrum-alias-input-border-size);
          border-inline-end-width: var(--spectrum-alias-input-border-size);
          border-start-end-radius: var(--spectrum-border-radius);
        }
      }
      &.spectrum-Stepper--isMobile {
        .spectrum-Stepper-input {
          border-radius: 0;
        }
        .spectrum-Stepper-button {
          block-size: var(--spectrum-textfield-height);
          inline-size: var(--spectrum-actionbutton-min-width);
        }
        .spectrum-Stepper-button--stepDown {
          border-block-start-width: var(--spectrum-alias-input-border-size);
          border-block-end-width: var(--spectrum-alias-input-border-size);
          border-inline-start-width: var(--spectrum-alias-input-border-size);
          border-start-start-radius: var(--spectrum-border-radius);
          border-end-start-radius: var(--spectrum-border-radius);
        }
        .spectrum-Stepper-button--stepUp {
          border-block-start-width: var(--spectrum-alias-input-border-size);
          border-block-end-width: var(--spectrum-alias-input-border-size);
          border-inline-end-width: var(--spectrum-alias-input-border-size);
          border-start-end-radius: var(--spectrum-border-radius);
          border-end-end-radius: var(--spectrum-border-radius);
        }
      }
    }
  }
  &.spectrum-Stepper--isQuiet {
    .spectrum-Stepper-icon {
      inset-inline-end: 0px;
    }

    &:not(.spectrum-Stepper--showStepper) {
      &:not(.spectrum-Stepper--isMobile) {
        .spectrum-Stepper-input {}
        .spectrum-Stepper-button {
          block-size: var(--spectrum-stepper-button-height);
          inline-size: var(--spectrum-stepper-button-width);
        }
        .spectrum-Stepper-button--stepDown {
          border-block-end-width: var(--spectrum-alias-input-border-size);
        }
        .spectrum-Stepper-button--stepUp {}
      }
      &.spectrum-Stepper--isMobile {
        .spectrum-Stepper-input {}
        .spectrum-Stepper-button {
          block-size: var(--spectrum-textfield-height);
          inline-size: var(--spectrum-actionbutton-min-width);
          border-block-end-width: var(--spectrum-alias-input-border-size);
        }
        .spectrum-Stepper-button--stepDown {}
        .spectrum-Stepper-button--stepUp {}
      }
    }
    &.spectrum-Stepper--showStepper {
      &:not(.spectrum-Stepper--isMobile) {
        .spectrum-Stepper-input {}
        .spectrum-Stepper-button {
          block-size: var(--spectrum-stepper-button-height);
          inline-size: var(--spectrum-stepper-button-width);
        }
        .spectrum-Stepper-button--stepDown {
          border-block-end-width: var(--spectrum-alias-input-border-size);
        }
        .spectrum-Stepper-button--stepUp {}
      }
      &.spectrum-Stepper--isMobile {
        .spectrum-Stepper-input {}
        .spectrum-Stepper-button {
          block-size: var(--spectrum-textfield-height);
          inline-size: var(--spectrum-actionbutton-min-width);
          border-block-end-width: var(--spectrum-alias-input-border-size);
        }
        .spectrum-Stepper-button--stepDown {}
        .spectrum-Stepper-button--stepUp {}
      }
    }
  }
}

.spectrum-Stepper--isQuiet {
  composes: spectrum-FocusRing--quiet;
}

/* this is specific to handling default width */
.spectrum-Stepper-container {
  /* ensure we have higher specificity than .spectrum-Field */
  &.spectrum-Stepper-container {
    /* override the default width of the field container, only with labelPosition=top. */
    --spectrum-field-default-width: var(--spectrum-stepper-default-width-desktop);
  }

  &.spectrum-Stepper-container--isMobile {
    --spectrum-field-default-width: var(--spectrum-stepper-default-width-mobile);
  }
}

.spectrum-Stepper-button {
  composes: spectrum-BaseButton;

  border-width: 0;

  &:hover,
  &:active {
    box-shadow: none;
  }

  .spectrum-Stepper-button-icon {
    max-block-size: 100%;
    flex-shrink: 0;

    transition: background var(--spectrum-global-animation-duration-100) ease-out,
                fill var(--spectrum-global-animation-duration-100) ease-out;
    box-sizing: initial;
  }
}
